import React, { Component } from 'react'
import SuperTable from '../zidingyiFile/SuperTable.js'
import axios from 'axios'
import { baseUrl } from '../helper/baseUrl.js'
import DingdanForm from '../component/DingdanForm.js'

export default class Caiping extends Component {

  state = {
    dingdanList: [],
    caipinList: [],
    showDdForm: false,
    selectRow: {},

  }

  componentDidMount() {
    this.getData()
    this.getData2()
  }


  getData = () => {
    axios({
      method: 'get',
      url: baseUrl +'dc_dingdan?transform=1&order=id,desc&page=1,10'
    }).then((res) => {
      res.data.dc_dingdan.map(d=>{
        if(d.status===0){
          d.status= '已结账'
        }else{
          d.status = '未结账' 
        }
      })
      this.setState({ dingdanList: res.data.dc_dingdan})
    }).catch()
  }


   getData2 = () => {
     axios({
      method: 'get',
      url: baseUrl + 'dc_caipin?transform=1&order=id,desc'
    }).then((res) => {
      this.setState({ caipinList: res.data.dc_caipin })
    }).catch()
  }


  handleDetails = (record)=>{
    this.setState({ showDdForm: true, selectRow: record})
  }

  closeForm=()=>{
    this.setState({ showDdForm: false })
  }

  allAccount=()=>{
    this.getData()
  }

  // aaaaa(){
  //   let ids  //1,2,4,5 
  //   let arr= []
  //   ids = caipin_ids.split(',')   //  [1,2,4,5]
  //   ids.map(id => {  //   [1,2,4,5]
  //     caipin.map(cai=>{   // caipin数组

  //       if (id === cai.id) {  /// ids的每一项  ===  caipin数组  id

  //         let obj = { foodname:'',price:'' }   // id对应的菜品.价钱

  //         obj.foodname = cai.foodname
  //         obj.price = cai.price

  //         arr.push(obj)   //[{}{}{}{}]

  //       }
  //     })

  //     setstate({arr:arr})
  //   })
  // }

  handleAccount=()=>{
    let closedAccount = [], ondAccount= []
    this.state.dingdanList.map(val=>{
      // console.log(val.status)
      if (val.status=='已结账'){
     
        closedAccount.push(val.status)
        this.setState({ dingdanList: closedAccount})
      }else{
        ondAccount.push(val.status)
        // this.setState({ dingdanList: ondAccount })
      }
    })
  }


  render() {

    const columns = [
      { title: '订单号', dataIndex: 'dingdan_num' },
      { title: '桌号', dataIndex: 'desk_num' },
      { title: '总金额', dataIndex: 'total_price' },
      { title: '提交时间', dataIndex: 'create_time' },
      {
        title: '订单详情', dataIndex: 'caipin_ids',
        render: (record) => {
          return <a href="javascript:;">正在处理</a>
        }
      },
      { title: '订单状态', dataIndex: 'status' },
      { title: '结账时间', dataIndex: 'pay_time' },
      {
        title: '操作', dataIndex: '',
        render: (record)=>{
          return <button onClick={this.handleDetails.bind(this, record)}>结账</button>
        }
      }

    ]

    return (
      <div>
        <section className="content-header">
          <h1>订单管理</h1>
          <ol className="breadcrumb">
            <li><a href="#"><i className="fa fa-dashboard"></i>首页</a></li>
            <li className="active">类别管理</li>
          </ol>
          <div className="row">
            <div className="btn-group col-md-3" style={{ marginTop: 20 }}>
              <button type="button" className="btn btn-danger" onClick={this.allAccount}>全部</button>
              <button type="button" className="btn btn-default" onClick={this.handleAccount}>已结账</button>
              <button type="button" className="btn btn-default" onClick={this.handleAccount}>未结账</button>
            </div>
          </div>
        </section>
        <SuperTable
          columns={columns}
          showIndex={true}
          dataSource={this.state.dingdanList}
          handleAccount={this.handleAccount}
        />

        {
          this.state.showDdForm && <DingdanForm 
          showDdForm={this.state.showDdForm}
          handleDetails={this.handleDetails}
          closeForm={this.closeForm}
          selectRow={this.state.selectRow}
          caipinList={this.state.caipinList}
          
           />
        }
     
  
      </div>
    )
  }
}
